<template>
  <div id="Software" class="container">
    <serch-line v-model:keyWord="keyWord"/>
    <div class="category">
      <div class="left-category">Product Archives & Related Information :
        <span v-if="productValue && productValue.data" style="color: #666666; font-size: 12px;margin-left: 4px">
         Location : <el-icon><Location /></el-icon> {{ productValue.data.location }}
        </span>
        <span v-else style="color: #666666; font-size: 12px;margin-left: 4px">Loading...</span> <!-- 加载中显示的内容 -->
      </div>
      <div class="box-category">
      </div>
    </div>
    <div class="product-info">
      <img :src="productValue.data.imgCover" alt="Product Image" class="product-img" />
      <div class="blue-box">Trusted Seller</div>
      <div class="info-box">
        <div class="product-name" :class="{ 'expanded': isExpanded }">
          {{ productValue.data.name }}
        </div>
        <div class="desc" >
          {{ productValue.data.productDesc
          }}
        </div>
        <div
          class="new-flag"
          :class="{'new-flag-green': productValue.data.newFlag == 1, 'new-flag-gray': productValue.data.newFlag === 0}"
        >
          NEW
        </div>

        <div class="price">
          <span style="font-size: 20px">$</span>{{  productValue.data.productPrice
          }}
        </div>
        <div class="contact-us">
          <p class="product-loc-1"><el-icon><Location /></el-icon>{{ productValue.data.location }}</p>
          <div>
            <el-button  style="color: white"  @click="contactUs()" class="ctrpbtn">Click to contact us</el-button>
          </div>
          <!-- 推荐指数 -->
          <div class="recommend-index">
            <span v-for="n in 5" :key="n" class="star" :class="{'active': n <= productValue.data.recommendLevel}">
              ★
            </span>
          </div>
        </div>
      </div>
    </div>

    <div class="detail">
      <div class="detail-title">Listing Details</div>
      <ul class="detail-list">
        <li>
          <strong>Stock Number:</strong>
          <span>{{ productValue.data.stockNumber }}</span>
        </li>
        <li>
          <strong>Model:</strong>
          <span>{{ productValue.data.model }}</span>
        </li>
        <li>
          <strong>Condition:</strong>
          <span>{{ productValue.data.conditions }}</span>
        </li>
        <li>
          <strong>Loading Weight:</strong>
          <span>{{ productValue.data.loadingWight }}</span>
        </li>
        <li>
          <strong>Match Power:</strong>
          <span>{{ productValue.data.matchPower }}</span>
        </li>
        <li>
          <strong>Configurations:</strong>
          <span>{{ productValue.data.configurations }}</span>
        </li>
      </ul>
    </div>

    <div class="detail">
      <div class="detail-title">Listing Details</div>
      <ul class="detail-list">
        <li>
          <strong>Stock Number:</strong>
          <span>{{ productValue.data.stockNumber }}</span>
        </li>
        <li>
          <strong>Model:</strong>
          <span>{{ productValue.data.model }}</span>
        </li>
        <li>
          <strong>Condition:</strong>
          <span>{{ productValue.data.conditions }}</span>
        </li>
        <li>
          <strong>Loading Weight:</strong>
          <span>{{ productValue.data.loadingWight }}</span>
        </li>
        <li>
          <strong>Match Power:</strong>
          <span>{{ productValue.data.matchPower }}</span>
        </li>
        <li>
          <strong>Configurations:</strong>
          <span>{{ productValue.data.configurations }}</span>
        </li>
      </ul>
    </div>

    <div class="detail">
      <div class="detail-title">Description</div>
      <ul class="detail-list">{{productValue.data.productDesc }}
      </ul>
    </div>
  </div>

  <el-dialog v-model="centerDialogVisible" title="CONTACT US" width="500" center>
    <div class="qrCode">
      <img src="/public/qrcode_facebook.png" alt="QR Code" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">Cancel</el-button>
<!--        <el-button type="primary" @click="centerDialogVisible = false">-->
<!--          Confirm-->
<!--        </el-button>-->
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="Software">
import { useRouter,useRoute } from 'vue-router';
import serchLine from './components/search-line.vue';
import { onMounted,ref } from 'vue'
import axios from 'axios'
import ReportApiUrlConfig from '@/api/select.ts'
const isExpanded = ref(false); // 控制是否展开
const router=useRouter()
const route=useRoute()
const keyWord = ref(route.query.keyWord || '');
const centerDialogVisible = ref(false)
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value; // 切换展开状态
};
const productValue=ref({
  data:{
    model:'',
    conditions:'',
    matchPower:'',
    loadingWight :'',
    stockNumber:'',
    configurations:'',
    name:'',
    imgCover:'',
    location:'',
    newFlag:0,
    productPrice:'',
    productDesc:''
  }
})
const getDetailInfo= async ()=> {
  const productId = route.params.id;
  const { data } = await axios.get(ReportApiUrlConfig.getProductById + `?productId=${productId}`);
  productValue.value=data;
}
const contactUs=()=> {
  centerDialogVisible.value=true;
  // 使用 this.$router.push 跳转到 detail 页面
  // router.push('/companyintroduction');
}

onMounted(() => {
  getDetailInfo();
})
</script>


<style scoped>
.container{
  width: 100%;
  display: flex;

  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: #F7F8F9;
}
.qrCode {
  display: flex;            /* 设置为 Flexbox 布局 */
  justify-content: center;  /* 水平居中图片 */
  align-items: center;      /* 垂直居中图片 */
  height: 100%;             /* 保证父容器有足够的高度来垂直居中 */
}

.qrCode img {
  max-width: 100%;          /* 设置二维码最大宽度为 100% */
  height: auto;             /* 高度自动调整以保持宽高比 */
  margin-bottom: 10px;      /* 与下方文字的间距 */
}

.category{
  width: 90%;
  font-family: PingFangSC, PingFang SC;
  font-weight: normal;
  font-size: 16px;
  color: #30A9FC;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.left-category{
  line-height: 40px;
  border-bottom: 1px dashed #e0e0e0;
  white-space: nowrap;      /* 不允许换行 */
  overflow: hidden;         /* 隐藏超出部分 */
  text-overflow: ellipsis;  /* 使用省略号表示超出部分 */
}
.box-category {
  margin: 5px;
  display: flex;
  flex-wrap: wrap; /* 使得内容换行 */
  gap: 5px; /* 每个项目之间的间隙 */
  justify-content: flex-start;
  width: 100%; /* 控制每行显示的宽度 */
}
.product-info{
  position: relative;
  margin-top: 20px;
  margin-bottom: 10px;
  width: 90%;
  height: 400px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  overflow: hidden;
  align-items: center;
  align-content: center;

  background-color: #fff;
  box-shadow: 2px 2px 2px 2px #e0e0e0;
  border-radius: 4px 4px 4px 4px;
}
.product-img {
  margin-left: 30px;
  width: 40%;
  height: 90%; /* 高度自动调整 */
  object-fit: contain; /* 等比例缩放，保持长宽比 */
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  box-shadow: 2px 2px 1px 1px #e0e0e0;

}
.info-box{
  margin: 20px;
  width: 60%;
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.product-name {
  font-weight: bold;
  font-size: 18px;
  line-height: 26px;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制显示两行 */
  -webkit-box-orient: vertical; /* 设置显示方向为垂直 */
  overflow: hidden; /* 超出部分隐藏 */
  position: relative; /* 为了让点击省略号的按钮定位 */
  background: #FFFFFF;
  border-radius: 4px 4px 4px 4px;

  font-family: PingFangSC, PingFang SC;
  color: #242E7B;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
/* NEW 标签的样式 */
.new-flag {
  margin-top: 10px;
  border-radius: 4px;
  font-size: 20px;
  font-weight: normal;
  text-align: center;
  line-height: 30px;
  width: 55px;
}
.new-flag-green {
  border: 1px solid #4abf4a;
  color: #4abf4a;
  background-color: white;
}

.new-flag-gray {
  border: 1px solid gray;
  color: gray;
  background-color: white;

}

.price {
  margin-top: 10px;
  width: 140px;
  height: 45px;
  background: rgba(255, 109, 44, 0.31);  /* 使用rgba设置背景色，透明度为0.31 */
  border-radius: 4px;
  color: #FF6D2C;
  text-align: center;
  font-style: normal;

  font-family: PingFangSC, PingFang SC;
  font-weight: normal;
  font-size: 30px;
  line-height:45px;
  text-transform: none;
}

.contact-us {
  margin-top: 30px;
  width: 100%;
  text-align: center;
}
.product-loc-1 {
  font-size: 16px;
  text-align: left;
  font-family: PingFangSC, PingFang SC;
  font-weight: normal;
  font-size: 15px;
  color: #999999;
  line-height: 36px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.ctrpbtn{
  margin-top: -15px;
  height: 50px;
  width: 300px;
  background: #e86335;
  border-radius: 10px 10px 10px 10px;
  font-size: 20px;
}


.recommend-index {
  text-align: center;
  margin-top: 5px;
  margin-left: 30px;
  font-size: 16px;
}

.star {
  color: #ddd; /* 灰色星星 */
}

.star.active {
  color: #ffcc00; /* 黄色星星 */
}
.blue-box {
  margin-left: 30px;
  width: 127px;
  line-height: 35px;
  position: absolute;
  font-size: 15px;
  color: white;
  background-color: rgba(48, 169, 252, 0.7); /* 使用rgba设置半透明背景色 */
  bottom: 59px;
  text-align: center;
}
.desc{
  font-size: 14px;
  color: #666;
  margin-top: 10px;
  white-space: normal; /* Allow wrapping */
  overflow: hidden;    /* Hide overflowing content */
  text-overflow: ellipsis; /* Add the ellipsis */
  display: -webkit-box;
  text-align: left;
  -webkit-line-clamp: 2; /* 限制显示两行 */
  -webkit-box-orient: vertical; /* 设置显示方向为垂直 */
  position: relative; /* 为了让点击省略号的按钮定位 */
}

.detail {
  height: 230px;
  margin-top: 5px;
  width: 90%;
  padding: 20px;
  background: #fff;
  //box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border-top: 1px dashed #e0e0e0;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: row;
}
.detail-title {
  width: 20%;
  text-align: center;
}


.detail-list {
  width: 80%;
  font-size: 14px;
  line-height: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.detail-list li {
  font-size: 14px;
  line-height: 20px;
  color: #666;
  padding: 5px 0; /* 添加行间距 */
  display: flex;
  justify-content: space-between; /* 强调两边对齐 */
  align-items: center;
}

.detail-list li:nth-child(odd) {
  background-color: #f5f5f5; /* 第一行白色 */
}

.detail-list li:nth-child(even) {
  background-color: #fff; /* 第二行淡灰色 */
}

.detail-list strong {
  color: #333;
  margin-right: 10px; /* 与内容拉开间距 */
  flex: 0 0 150px; /* 固定宽度让 strong 左对齐 */
  text-align: left; /* 确保左对齐 */
}

.detail-list span {
  flex: 1; /* 自动调整宽度 */
  text-align: center; /* 居中对齐 */
}

</style>

